@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "../../styles/mixins";

/**
 *	General
 */
.step-container {
	max-width: 960px;
	margin: 0 auto;

	// Some steps (like plans) need a larger
	// width column.
	&.is-wide-layout {
		max-width: 1040px;
	}

	// Some steps (like courses) have their width limitation
	&.is-full-layout {
		max-width: unset;
	}

	// Some steps (intent gathering) use a horizontal layout
	&.is-horizontal-layout {
		align-items: flex-start;
		justify-content: space-between;
		margin-top: 28px;
		max-width: 1024px;
		padding: 0 20px;

		&.has-navigation {
			padding-bottom: 60px;
		}

		@include break-small {
			margin-top: 25vh;
			display: flex;

			.step-container__header {
				margin-top: 0;
				padding-inline-end: 20px;
			}
		}

		@include break-xlarge {
			.step-container__header .formatted-header {
				margin-top: 0;
			}
		}
	}

	.step-container__buttons {
		text-align: center;
		margin-bottom: 20px;
	}

	.step-container__skip-hr {
		background: var(--color-primary-light);
		max-width: 270px;
		margin-bottom: 50px;
		margin-top: -20px;

		@include break-small {
			margin: 30px auto;
		}
	}

	.is-large-skip-layout .step-container__buttons {
		margin-bottom: 34px;

		@include break-small {
			margin-bottom: 14px;
		}
	}

	/**
	 *	Header
	 */
	.step-container__header {
		margin-top: 32px;
		margin-bottom: 48px;
		display: block;
		justify-content: space-between;
		align-items: center;

		.formatted-header {
			margin: 0;

			@include break-xlarge {
				margin-top: 88px; // 56px + 32px
			}

			.formatted-header__title {
				margin: 0;

				@include onboarding-font-recoleta;
				color: var(--color-neutral-100);
				font-size: 2rem;

				@include break-xlarge {
					font-size: 2.75rem;
				}
			}

			.formatted-header__subtitle {
				@include break-xlarge {
					font-size: 1rem;
				}
			}
		}

		.step-container__header-button {
			@include break-small {
				flex-basis: 100%;
			}
		}

		.step-container__header-image {
			margin-top: 64px;
			display: none;

			@include break-small {
				display: block;

				// Fix overflow caused by header_image
				img {
					height: auto;
					max-width: 100%;
				}
			}
		}
	}

	/**
	 *	Navigation
	 */
	.step-container__navigation {
		pointer-events: none;
		* {
			pointer-events: auto;
		}
	}
	.step-container__navigation.action-buttons {
		height: 60px;
		align-items: center;
		justify-content: space-between;
		display: flex;
		font-size: 0.875rem;
		bottom: 0;
		margin: 0;
		border-top: none;

		position: absolute;
		top: 8px;
		inset-inline-start: 72px;
		inset-inline-end: 24px;
		// Align with wordpress logo in signup-header
		padding: 1px 0 0;
		background-color: transparent;
		border: none;
		box-shadow: none;

		&.has-sticky-nav-buttons-padding {
			padding-bottom: 48px;
		}

		&:empty {
			display: none;
		}

		&.should-hide-nav-buttons {
			justify-content: flex-end;
		}

		.step-container__navigation-link {
			font-size: 0.875rem;
			font-weight: 500;

			&.button.is-primary {
				border-radius: 4px;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			}

			&.has-underline {
				text-decoration: underline;
			}

			&.has-skip-heading {
				transform: translateY(-3px);
				// override unessecary super specificity added by another class
				padding-top: 0 !important;
			}
		}

		.step-container__navigation-link.forward,
		.step-container__skip-wrapper {
			margin-inline-start: auto;
		}

		.step-container__skip-heading {
			color: var(--color-text-inverted);
		}

		.step-container__navigation-logo {
			display: none;
			// Align with wordpress logo in signup-header
			margin-top: 1px;
			margin-inline-end: 24px;
			fill: var(--color-text);
			stroke: var(--color-text);

			@include break-small {
				display: block;
			}
		}
	}

	/**
	 *	Content
	 */
	.step-container__content {
		margin-top: 0;
		display: block;
	}

	/**
	 * Jetpack and WooCommerce Powered
	 */
	.step-container__jetpack-powered,
	.step-container__header-jetpack-powered,
	.step-container__woocommerce-powered,
	.step-container__header-woocommerce-powered {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		text-align: center;
		font-family: "SF Pro Text", $sans;
		font-size: $font-body-extra-small;
		font-weight: 400;
		line-height: 20px;

		svg {
			margin-inline-end: 6px;
		}
	}

	.step-container__jetpack-powered {
		margin: 1rem 0;
		width: 100%;
	}

	.step-container__header-jetpack-powered {
		position: absolute;
		top: 32px;
		visibility: hidden;

		@include break-small {
			visibility: visible;
		}
	}
}
